<template>
  <header class="checkboxQuestion" tabindex="-1" ref="questionDom">
    <!-- 多选 -->
    <div class="question-add-body-content-question">
      <div class="question-add-body-content-question-div">
        <span class="question" :style="isQuestionShowStyle">
          <span>问题</span>
          <span class="questionNum">{{ num }}</span>
        </span>
        <i class="el-icon-remove-outline" @click="deleteQuestion"></i>
      </div>

      <el-form :model="questionData" ref="ruleForm" class="demo-ruleForm">
        <el-form-item
          prop="mainTitle"
          :rules="[
            {
              required: true,
              message: '请输入问题标题',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 100,
              message: '长度在 3 到 100 个字符',
              trigger: 'blur',
            },
          ]"
        >
          <span
            style="color: red; margin-left: 8.7px; display: none"
            class="isRequireAnswer"
          >
            *
          </span>
          <el-input
            v-model="questionData.mainTitle"
            placeholder="请输入问题标题"
            class="title"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-checkbox-group v-model="checkList">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
          color="white"
          class="radio"
        >
          <label class="label-radio">
            <el-checkbox :label="tag" class="label-radio-checkbox">
              {{ tag }}
            </el-checkbox>
          </label>
        </el-tag>
        <el-input
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
          class="title title-tag"
        ></el-input>
      </el-checkbox-group>
    </div>

    <!-- 添加选项 -->

    <div class="addSelect" @click="addselect">
      <span style="margin-left: 20px">
        <i class="el-icon-plus" style="color: #3b51b9; font-size: 17.5px"></i>
        <span style="margin-left: 8px; font-size: 17.5px; color: #3b51b9">
          添加选项
        </span>
      </span>
    </div>
  </header>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'CheckboxQuestion',
  mounted() {
    $('.titleInput .el-input__inner').focus()
  },
  data() {
    return {
      content: '',
      checkList: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      //问题的序号：
      num: 1,
      //判断本组件是否被选中
      isFocus: false,

      //! 传给父组件的问卷数据
      questionData: {
        mainTitle: '',
        inputValueArray: [],
        queType: 2, //问卷类型
        requiredQue: 0, //是否必填
        displayNumber: 1, //是否显示序号
      },
    }
  },
  props: {
    //设置组件的默认属性
    count: {
      type: Number, //设置这个属性的默认属性类型
    },
    isQuestionShowStyle: {
      type: String,
    },
  },
  beforeMount() {
    //计算问题的序号：
    this.num = this.count
  },

  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

      //! 删除的时候把选项从 inputValueArray 数组中删除
      this.questionData.inputValueArray.splice(
        this.questionData.inputValueArray.indexOf(tag),
        1
      )
      console.log(this.questionData.inputValueArray, 'handleClose')
    },

    addselect() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue

      //! 把添加的选项插入 inputValueList 数组中
      if (inputValue) {
        this.questionData.inputValueArray.splice(
          this.questionData.inputValueArray.length,
          0,
          inputValue
        )
        console.log(this.questionData.inputValueArray)
      }

      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },

    //删除本身
    deleteQuestion() {
      this.$confirm('请确认是否删除本问卷？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // console.log(this.$refs.questionDom.className)
          let classStr = this.$refs.questionDom.className
          let classNum = parseInt(classStr.substr(classStr.length - 1, 1))
          // console.log(classNum, 's')
          //把大于本身的序号改变
          this.$emit('delete-question', {
            ismount: false,
            needEditNumber: classNum,
          })

          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style scoped>
.checkboxQuestion {
  margin-right: 60px;
  margin-bottom: 40px;
  width: 440px;
  height: 297px;
  border: 2px solid lightgrey;
  border-radius: 5px;
  outline: none;
}

/*
question-add-body-content-question
 */
.question-add-body-content-question {
  width: 434px;
  height: 240px;
  overflow: auto;
  /* border: 2px solid lightgrey;
  border-radius: 5px; */
  /* display: inline-block; */
  /* line-height: 280px; */
  /* text-align: center; */
  /* margin: autos; */
}
.question-add-body-content-question::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.question-add-body-content-question::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: #535353;
}
.question-add-body-content-question::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ededed;
}

.question-add-body-content-question-div {
  width: 405px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  margin: auto;
  /* border: 1px solid; */
  font-size: 18.5px;
  position: relative;
}
.question-add-body-content-question-div .el-icon-remove-outline {
  color: red;
  font-weight: bold;
  position: absolute;
  right: 1px;
  top: 16px;
}
.question-add-body-content-question .title {
  width: 395px;
  height: 36.5px;
  margin-left: 20px;
  border: 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  font-size: 15px;
  font-weight: normal;
}
.question-add-body-content-question .title-tag {
  margin-top: 10px;
  margin-left: 20px;
}
</style>

<style scoped>
.radio {
  display: block;
  width: 395px;
  height: 35.99px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  outline: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
  margin: auto;
  margin-top: 10px;
  margin-left: 20px;
  line-height: 35.99px;
  position: relative;
}
.label-radio {
  display: inline-block;
  width: 385px;
  height: 35.99px;
  /* border: 1px solid black; */
}
.radio input {
  border: black;
}
.label-radio {
  font-size: 17px;
  font-weight: normal;
}

/**添加选项 */
.addSelect {
  width: 438px;
  height: 57px;
  border-top: 2px solid lightgrey;
  line-height: 53px;
  cursor: pointer;
}
</style>
<style>
.checkboxQuestion .el-checkbox__inner {
  border: 1px solid grey;
  margin-left: 5px;
}
.checkboxQuestion .el-tag__close {
  position: absolute;
  right: 10px;
  top: 10px;
}
/* .label-radio-checkbox .el-checkbox__original {
  width: 11px;
  height: 11px;
} */
.label-radio-checkbox .el-checkbox__inner {
  width: 11px;
  height: 11.35px;
}
.checkboxQuestion .el-form-item__error {
  margin-left: 20px;
}
</style>
